<template>
  <div class="app">
   <Myheader :top="top"
             :cur="cur"  
             @setlight="setlight"
             @search="search"
    />
   <Mycon :list="list"
             :cur="cur"
    />
  </div>
</template>

<script>
import axios from 'axios'
import Myheader from './components/myheader.vue'
import Mycon from './components/mycon.vue'
export default {
    data(){ //存放数据
        return{
            top:["全部","已完成","强制终止","进行中"],
            list: [],
            cur:0,
            list1:[],
        }
    },
    methods:{   //函数
        setlight(index){    //自定义函数 头部子组件返回下标
            this.cur=index
        },
        search(text){
            this.list=this.list1.filter(item=>{
                return item.title.includes(text)
            })
        },
    },
    components:{   //注册组件
        Myheader,
        Mycon,
    },
    mounted(){   //挂载阶段 请求数据
        axios.post('/list').then(res=>{
            this.list1=res.data;
            this.list=res.data;
            // console.log(this.list);
        })
    },
}
</script>

<style>

</style>